import React from 'react';
import { Table } from 'antd';
import { Link } from 'react-router' ; 
const { Column } = Table;

class QuestionList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            selectedRowKeys:[],
        }
    }

    onSelectChange = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
    }

    handleTableChange = (pagination, filters, sorter) => {
        if (typeof(this.props.handleTableChange) === "function") {
            this.props.handleTableChange(pagination, filters, sorter);   
        }
    }

    // deleteQuestions = () => {   
    //     if ("onDelete" in this.props && typeof(this.props.onDelete) === "function"){
    //             this.props.onDelete();
    //     }
    // }

    render(){
        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            onSelect: (record, selected, selectedRows) => {
                if ("onSelect" in this.props) {
                    this.props.onSelect(selectedRows);
                }
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                if ("onSelect" in this.props) {
                    this.props.onSelect(selectedRows);
                }
            }
        };
        const hasSelected = selectedRowKeys.length > 0;
        const footer = () => {
            return ( <div>
                        <span style={{ marginLeft: 8 }}>{ hasSelected ? `Selected ${selectedRowKeys.length} items` : '' }</span>
                        <span> /  total:   { this.props.count } </span>
                </div>
                )
        };
        return (
            <div >
                <Table bordered 
                    rowKey={ record =>  record.id } 
                    dataSource={this.props.sourceData} 
                    rowSelection={rowSelection}
                    pagination={this.props.pagination}
                    loading={this.props.loading}
                    onChange={this.handleTableChange}
                    footer={() => footer() }
                    >
                    <Column
                        title="id"
                        dataIndex="id"
                        key="id"
                        render={ id => <Link to={`/admin/questions/${id}`} > { id }  </Link> }
                        />
                    <Column
                        title="主题"
                        dataIndex="subject"
                        key="subject"
                        />
                    <Column
                        title="分数"
                        dataIndex="score"
                        key="score"
                        width='10%'
                    />
                    <Column
                        title="难度"
                        dataIndex="level"
                        key="level"
                        width='10%'
                    />
                    <Column
                        title="类型"
                        dataIndex="type"
                        key="type"
                        width='10%'
                    />
                </Table>
            </div>
        )
    }
}

export default QuestionList;